﻿@using Choucius.Boilerplate9.Web.Startup
@{
    ViewBag.Title = L("RubberFrameStatistics");
    ViewBag.CurrentPageName = PageNames.RubberFrameStatistics;
}
@model Choucius.Boilerplate9.Web.Models.Home.HomeViewModel

@section scripts
{
    <script src="~/libs/chartjs/dist/Chart.js" asp-append-version="true"></script>
    <script>
        $(function () {

            'use strict';

            /* ChartJS
             * -------
             * Here we will create a few charts using ChartJS
             */

            //-----------------------
            //- Rubber Frame CHART -
            //-----------------------

            // Get context with jQuery - using jQuery's .get() method.
            var rubberFrameChartCanvas = $('#rubberFrameChart').get(0).getContext('2d');
            // This will get the first returned node in the jQuery collection.

            var rubberFrameChartData = {
                labels: @Html.Raw(Json.Serialize(Model.Labels)),
                datasets: [
                    {
                        label: '入库',
                        fill: '#dee2e6',
                        borderColor: '#ced4da',
                        pointBackgroundColor: '#ced4da',
                        pointBorderColor: '#c1c7d1',
                        pointHoverBackgroundColor: '#fff',
                        pointHoverBorderColor: 'rgb(220,220,220)',
                        spanGaps: true,
                        data: @Html.Raw(Json.Serialize(Model.InboundRubberFrameCount)),
                    },
                    {
                        label: '出库',
                        fill: 'rgba(0, 123, 255, 0.9)',
                        borderColor: 'rgba(0, 123, 255, 1)',
                        pointBackgroundColor: '#3b8bba',
                        pointBorderColor: 'rgba(0, 123, 255, 1)',
                        pointHoverBackgroundColor: '#fff',
                        pointHoverBorderColor: 'rgba(0, 123, 255, 1)',
                        spanGaps: true,
                        data: @Html.Raw(Json.Serialize(Model.OutboundRubberFrameCount))
                                    }
                ]
            };

            var rubberFrameChartOptions = {
                //Boolean - If we should show the scale at all
                showScale: true,
                //Boolean - Whether grid lines are shown across the chart
                scaleShowGridLines: false,
                //String - Colour of the grid lines
                scaleGridLineColor: 'rgba(0,0,0,.05)',
                //Number - Width of the grid lines
                scaleGridLineWidth: 1,
                //Boolean - Whether to show horizontal lines (except X axis)
                scaleShowHorizontalLines: true,
                //Boolean - Whether to show vertical lines (except Y axis)
                scaleShowVerticalLines: true,
                //Boolean - Whether the line is curved between points
                bezierCurve: true,
                //Number - Tension of the bezier curve between points
                bezierCurveTension: 0.3,
                //Boolean - Whether to show a dot for each point
                pointDot: false,
                //Number - Radius of each point dot in pixels
                pointDotRadius: 4,
                //Number - Pixel width of point dot stroke
                pointDotStrokeWidth: 1,
                //Number - amount extra to add to the radius to cater for hit detection outside the drawn point
                pointHitDetectionRadius: 20,
                //Boolean - Whether to show a stroke for datasets
                datasetStroke: true,
                //Number - Pixel width of dataset stroke
                datasetStrokeWidth: 2,
                //Boolean - Whether to fill the dataset with a color
                datasetFill: true,
                //String - A legend template
                legendTemplate: '<ul class="<%=name.toLowerCase()%>-legend"><% for (var i=0; i<datasets.length; i++){%><li><span style="background-color:<%=datasets[i].lineColor%>"></span><%=datasets[i].label%></li><%}%></ul>',
                //Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
                maintainAspectRatio: false,
                //Boolean - whether to make the chart responsive to window resizing
                responsive: true
            };

            //Create the line chart
            var rubberFrameChart = new Chart(rubberFrameChartCanvas, {
                type: 'line',
                data: rubberFrameChartData,
                options: rubberFrameChartOptions
            });

            //---------------------------
            //- END Rubber Frame CHART -
            //---------------------------
        });
    </script>
}

<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-12">
                <h1 class="m-0 text-dark">@L("RubberFrameStatistics")</h1>
            </div>
        </div>
    </div>
</div>
<section class="content">
    <div class="container-fluid">
        <!-- Info boxes 2 -->
        <div class="row">
            <div class="col-12 col-sm-6 col-md-3">
                <div class="info-box">
                    <span class="info-box-icon bg-info elevation-1">
                        <i class="fas fa-cog"></i>
                    </span>
                    <div class="info-box-content">
                        <span class="info-box-text">@L("Initialization")</span>
                        <span class="info-box-number">
                            @ViewBag.rf1
                        </span>
                    </div>
                    <!-- /.info-box-content -->
                </div>
                <!-- /.info-box -->
            </div>
            <!-- /.col -->
            <div class="col-12 col-sm-6 col-md-3">
                <div class="info-box mb-3">
                    <span class="info-box-icon bg-danger elevation-1">
                        <i class="fas fa-thumbs-up"></i>
                    </span>
                    <div class="info-box-content">
                        <span class="info-box-text">@L("InPackStock")</span>
                        <span class="info-box-number">
                            @ViewBag.rf2
                        </span>
                    </div>
                    <!-- /.info-box-content -->
                </div>
                <!-- /.info-box -->
            </div>
            <!-- /.col -->
            <!-- fix for small devices only -->
            <div class="clearfix hidden-md-up"></div>
            <div class="col-12 col-sm-6 col-md-3">
                <div class="info-box mb-3">
                    <span class="info-box-icon bg-success elevation-1">
                        <i class="fas fa-shopping-cart"></i>
                    </span>
                    <div class="info-box-content">
                        <span class="info-box-text">@L("OutPackStock")</span>
                        <span class="info-box-number">@ViewBag.rf3</span>
                    </div>
                    <!-- /.info-box-content -->
                </div>
                <!-- /.info-box -->
            </div>
            <!-- /.col -->
            <div class="col-12 col-sm-6 col-md-3">
                <div class="info-box mb-3">
                    <span class="info-box-icon bg-warning elevation-1">
                        <i class="fas fa-users"></i>
                    </span>
                    <div class="info-box-content">
                        <span class="info-box-text">@L("InProductStock")</span>
                        <span class="info-box-number">@ViewBag.rf6</span>
                    </div>
                    <!-- /.info-box-content -->
                </div>
                <!-- /.info-box -->
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
        <!--胶框卡片-->
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title">@L("RubberFrames")</h5>
                        <div class="card-tools">
                            <button type="button" class="btn btn-tool" data-card-widget="collapse">
                                <i class="fas fa-minus"></i>
                            </button>
                        </div>
                    </div>
                    <!-- /.card-header -->
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-8">
                                <p class="text-center">
                                    <strong>近7日胶框出入库趋势</strong>
                                </p>
                                <div class="chart">
                                    <div class="chartjs-size-monitor">
                                        <div class="chartjs-size-monitor-expand">
                                            <div class=""></div>
                                        </div>
                                        <div class="chartjs-size-monitor-shrink">
                                            <div class=""></div>
                                        </div>
                                    </div>
                                    <!-- Sales Chart Canvas -->
                                    <canvas id="rubberFrameChart" height="360" style="height: 180px; display: block; width: 730px;" width="1460" class="chartjs-render-monitor"></canvas>
                                </div>
                                <!-- /.chart-responsive -->
                            </div>
                            <!-- /.col -->
                            <div class="col-md-4">
                                <p class="text-center">
                                    <strong>@L("StatusRatio")</strong>
                                </p>
                                <div class="progress-group">
                                    @L("Initialization")
                                    <span class="float-right"><b>@ViewBag.rf1</b>/@ViewBag.rf</span>
                                    <div class="progress progress-sm">
                                        <div class="progress-bar bg-primary" style="width: @ViewBag.rf1p"></div>
                                    </div>
                                </div>
                                <!-- /.progress-group -->
                                <div class="progress-group">
                                    @L("InPackStock")
                                    <span class="float-right"><b>@ViewBag.rf2</b>/@ViewBag.rf</span>
                                    <div class="progress progress-sm">
                                        <div class="progress-bar bg-danger" style="width: @ViewBag.rf2p"></div>
                                    </div>
                                </div>
                                <!-- /.progress-group -->
                                <div class="progress-group">
                                    <span class="progress-text">
                                        @L("OutPackStock")
                                    </span>
                                    <span class="float-right"><b>@ViewBag.rf3</b>/@ViewBag.rf</span>
                                    <div class="progress progress-sm">
                                        <div class="progress-bar bg-success" style="width: @ViewBag.rf3p"></div>
                                    </div>
                                </div>
                                <!-- /.progress-group -->
                                <div class="progress-group">
                                    @L("InProductStock")
                                    <span class="float-right"><b>@ViewBag.rf6</b>/@ViewBag.rf</span>
                                    <div class="progress progress-sm">
                                        <div class="progress-bar bg-warning" style="width: @ViewBag.rf6p"></div>
                                    </div>
                                </div>
                                <!-- /.progress-group -->
                            </div>
                            <!-- /.col -->
                        </div>
                        <!-- /.row -->
                    </div>
                    <!-- ./card-body -->
                    <div class="card-footer">
                        <div class="row">
                            <div class="col-sm-3 col-6">
                                <div class="description-block border-right">
                                    <h5 class="description-header">@ViewBag.rf1</h5>
                                    <span class="description-text">@L("Initialization")</span>
                                </div>
                                <!-- /.description-block -->
                            </div>
                            <!-- /.col -->
                            <div class="col-sm-3 col-6">
                                <div class="description-block border-right">
                                    <h5 class="description-header">@ViewBag.rf2</h5>
                                    <span class="description-text">@L("InPackStock")</span>
                                </div>
                                <!-- /.description-block -->
                            </div>
                            <!-- /.col -->
                            <div class="col-sm-3 col-6">
                                <div class="description-block border-right">
                                    <h5 class="description-header">@ViewBag.rf3</h5>
                                    <span class="description-text">@L("OutPackStock")</span>
                                </div>
                                <!-- /.description-block -->
                            </div>
                            <!-- /.col -->
                            <div class="col-sm-3 col-6">
                                <div class="description-block">
                                    <h5 class="description-header">@ViewBag.rf6</h5>
                                    <span class="description-text">@L("InProductStock")</span>
                                </div>
                                <!-- /.description-block -->
                            </div>
                        </div>
                        <!-- /.row -->
                    </div>
                    <!-- /.card-footer -->
                </div>
                <!-- /.card -->
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </div>
</section>
@* @section scripts {
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min.js"></script>
} *@